<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Column grid demo</title>

  <link rel="stylesheet" href="demo.css"/>
  <script src="../dist/gridstack-all.js"></script>
</head>
<body>
  <div class="container-fluid">
    <h1>column() grid demo (fix cellHeight)</h1>
    <div><span>Number of Columns:</span> <span id="column-text">12</span></div>
    <div>
      <label>Choose re-layout:</label>
      <select onchange="setLayout(this.value)">
        <option value="list">list</option>
        <option value="compact">compact</option>
        <option value="moveScale">move + scale</option>
        <option value="move">move</option>
        <option value="scale">scale</option>
        <option value="none">none</option>
        <option value="custom">custom</option>
      </select>
    </div>
    <div>
      load:
      <a onClick="grid.removeAll().load(list)" class="btn btn-primary" href="#">list</a>
      <a onClick="grid.removeAll().load(test1)" class="btn btn-primary" href="#">case 1</a>
      <a onClick="random()" class="btn btn-primary" href="#">random</a>
      <a onClick="addWidget()" class="btn btn-primary" href="#">Add Widget</a>
      column:
      <a onClick="column(1)" class="btn btn-primary" href="#">1</a>
      <a onClick="column(2)" class="btn btn-primary" href="#">2</a>
      <a onClick="column(3)" class="btn btn-primary" href="#">3</a>
      <a onClick="column(4)" class="btn btn-primary" href="#">4</a>
      <a onClick="column(6)" class="btn btn-primary" href="#">6</a>
      <a onClick="column(8)" class="btn btn-primary" href="#">8</a>
      <a onClick="column(10)" class="btn btn-primary" href="#">10</a>
      <a onClick="column(12)" class="btn btn-primary" href="#">12</a>
    </div>
    <br>
    <div class="grid-stack"></div>
  </div>

  <script type="text/javascript">
    // NOTE: REAL apps would sanitize-html or DOMPurify before blinding setting innerHTML. see #2736
    GridStack.renderCB = function(el, w) {
      el.innerHTML = w.content;
    };

    let test1 = [ // DOM order will be 0,1,2,3,4,5,6 vs column1 = 0,1,4,3,2,5,6
      /* match karma testing
      {x: 0, y: 0, w: 4, h: 2},
      {x: 4, y: 0, w: 4, h: 4},
      {text: ' auto'},
      */
      {x: 0, y: 0, w: 2, h: 2},
      {x: 2, y: 0, w: 2},
      {x: 5, y: 1},
      {x: 5, y: 0, w: 2},
      // {x: 0, y: 0}, // conflict
      {text: ' auto'}, // autoPosition testing
      // {x: 4, y: 0}, // same auto-pos
      {x: 5, y: 3, w: 2},
      {x: 0, y: 4, w: 12}
    ];
    let list = [{h:2},{},{},{},{},{},{},{},{},{w:2},{},{},{},{},{},{}];
    list.forEach((n,i) => {
      n.content = '<button onClick="grid.removeWidget(this.parentNode.parentNode)">X</button><br>' + ++i;
    });
    let count = 0;
    test1.forEach(n => {
      n.content = '<button onClick="grid.removeWidget(this.parentNode.parentNode)">X</button><br>' + count++ + (n.text ? n.text : '');
    });

    let grid = GridStack.init({
      float: true,
      cellHeight: 100 // fixed as default 'auto' (square) makes it hard to test 1-3 column in actual large windows tests
    }).load(list);
    let text = document.querySelector('#column-text');
    let layout = 'list';

    grid.on('added removed change', function(e, items) {
      let str = '';
      items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
      console.log(e.type + ' ' + items.length + ' items:' + str );
    });


    function random() {
      grid.removeAll();
      count = 0;
      for (i=0; i<8; i++) addWidget(true);
    }

    function addWidget() {
      let n = {
        w: Math.round(1 + 3 * Math.random()),
        h: Math.round(1 + 3 * Math.random()),
        content: '<button onClick="grid.removeWidget(this.parentNode.parentNode)">X</button><br>' + count++,
      };
      grid.addWidget(n);
    };

    function column(n) {
      grid.column(n, layout);
      text.innerHTML = n;
    }
    // dummy test method that moves items to the right each new layout... grid engine will validate those values (can't be neg or out of bounds) anyway...
    function columnLayout(column, oldColumn, nodes, oldNodes) {
      oldNodes.forEach(n => {
        n.x = n.x + 1;
        nodes.push(n);
      });
      oldNodes.length = 0;
    }
    function setLayout(name) {
      layout = name === 'custom' ? this.columnLayout : name;
    }
  </script>
</body>
</html>
